<template>
    <div class="">
  
      <ELTable v-bind="configTable" ref="searchSubmit">
  
        <template #search="{searchSubmit,params}">
        <div>
          <el-form :inline="true" class="demo-form-inline">
            <!-- 状态 -->
            <!-- 日期 -->
            <el-form-item label="楼栋">
              <BuildSelect  @update="(e:any)=>cascaderChange(e,params)"></BuildSelect>
            </el-form-item>
            <el-form-item label="房号">
              <el-input v-model="params.houseno" placeholder="请输入房间号" />
            </el-form-item>
            <el-form-item label="房间类型">
              <el-select clearable v-model="params.type" style="width:120px" placeholder="请选择状态">
                <el-option v-for="item in 10" :label="item+'室'" :value="item+'室'" />
              </el-select>
            </el-form-item>
            <el-form-item label="面积" >
              <el-input v-model="params.areas" style="width: 100px;"  placeholder="" />
                至
              <el-input v-model="params.areas2" style="width: 100px;" placeholder="" />
            </el-form-item>
             <el-form-item label="房间朝向">
              <el-select clearable v-model="params.orientation" style="width:120px" placeholder="请选择状态">
                <el-option  label="朝东" value="朝东" />
                <el-option  label="朝西" value="朝西" />
                <el-option  label="朝南" value="朝南" />
                <el-option  label="朝北" value="朝北" />
                <el-option  label="东南" value="东南" />
                <el-option  label="西南" value="西南" />
                <el-option  label="东北" value="东北" />
                <el-option  label="西北" value="西北" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
          <template #buttons="{ deleteAllHandle }">
          <div>
            <el-button type="primary" @click="add()">添加</el-button>
            <el-button type="danger" @click="deleteAllHandle">删除</el-button>
          </div>
        </template>
          <template #operate="{ scope, delrow }">
          <div>
            <el-button type="primary" @click="change(scope.row)">修改</el-button>
            <el-button type="danger" @click="delrow(scope.row.id)">删除</el-button>
          </div>
        </template>
      </ELTable>
      <HouseAdd v-if="showadd" @uptata="updata" @close="close" :addform="addform"></HouseAdd>
    </div>
  </template>
  
  <script lang='ts' setup>
  import { ref,watch,reactive } from "vue"
  import ELTable,{TableType} from "../../components/ELTable.vue";
  import { gethouse,housesdelete } from '../../service/house/house'
  import { column } from './house'
  import HouseAdd from "../../components/HouseAdd.vue";
  
  const searchSubmit = ref()
  const addform = ref<any>({})
  const showadd = ref(false)


  const configTable: TableType = reactive({
      column: column,
      isSelection: true,
      loadData: gethouse,
      delDate:housesdelete,
      searchParams:{
        state:0
      }
  })

  //房屋信息改变
const cascaderChange = (e:any,params:any)=>{
  console.log(e);
  console.log(params);
  if(!e) params.buildingid=null;
  else{
    params.buildingid=e[e.length-1];
  }
}

const close = ()=>{
  showadd.value=false
}

const updata = ()=>{
    searchSubmit.value.searchSubmit()
}
const add = ()=>{
    showadd.value=true
}

const change = (row:any)=>{
  addform.value=row
  showadd.value=true
}
  </script>
  
  <style  scoped>
  </style>
  